// pages/main-music/main-music.js
import { getMusicBanner,getTopPlayList } from "../../serive/music"
import { querySelector } from "../../utils/query-selector"
import { throttle } from "underscore"
import recommendStore from "../../store/recommendStore"
import rankingStore from "../../store/rankingStore"
import playerStore from "../../store/playerStore"

const querySelectorThrottle = throttle(querySelector,100)
const app = getApp()

Page({
    data:{
        inputValue:"",
        banners:[],
        bannerHeight:150,
        recommendSongs:[],
        hotMenuList:[],
        screenWidth:375,
        screenHeight:667,
        recommendMenuList:[],
        rankingInfos:{},

        currentSong:{},
        isPlaying:undefined
    },
    onLoad() {
        this.fetchMusicBanner()
        this.fetchPlaylistDetail()
        this.fetchTopPlayList()
        // 获取设备尺寸
        this.setData({
            screenWidth: app.globalData.screenWidth,
            screenHeight: app.globalData.screenHeight
         })
    },
    async fetchMusicBanner() {
        const res = await getMusicBanner()
        this.setData({ banners: res.banners })
    },
    async fetchPlaylistDetail() {
        // 发起action
        recommendStore.dispatch("fetchRecommeendAction")
        recommendStore.onState("recommendInfo", this.handleRecommendSongs)
        rankingStore.dispatch("fetchSongRankingAction")
        rankingStore.onState("newRanking", this.getRankingHeadle("newRanking"))
        rankingStore.onState("originRanking", this.getRankingHeadle("originRanking"))
        rankingStore.onState("upRanking", this.getRankingHeadle("upRanking"))
        rankingStore.onState("hotRanking", this.getRankingHeadle("hotRanking"))
        
        playerStore.onStates(["currentSong","isPlaying"],this.handlePlayInfos)
    },
    fetchTopPlayList() {
        getTopPlayList("全部",6,0).then(res => {
            this.setData({ hotMenuList:res.playlists })
        })
        getTopPlayList("华语",6,0).then(res => {
            this.setData({ recommendMenuList:res.playlists })
        })
    },
    bannerImageLoad() {
        // 防抖
        querySelectorThrottle(".banner-image").then(res => {
            this.setData({ bannerHeight: res[0].height })
        })
    },
    onMoreSongTap() {
        wx.navigateTo({
          url: '/pages/detail-song/detail-song?type=recommend&key=recommendInfo',
        })
    },
    onSongItemTap(event) {
        const index = event.currentTarget.dataset.index
        playerStore.setState("playSongList", this.data.recommendSongs)
        playerStore.setState("playSongIndex", index)
    },
    onChangeModeTap() {
        playerStore.dispatch("playMusicStateAction")
    },
    // =============== store状态管理 ============
    handleRecommendSongs(value) {
        if (!value.tracks) return
        this.setData({ recommendSongs : value.tracks.slice(0,6) })
    },
    getRankingHeadle(ranking) {
        return (value) => {
            const newRankingInfos = { ...this.data.rankingInfos, [ranking]: value }
            this.setData({ rankingInfos:newRankingInfos })
        }
    },
    handlePlayInfos({ currentSong,isPlaying }) {
        if (currentSong) {
            this.setData({ currentSong })
        }
        if (isPlaying !== undefined) {
            this.setData({ isPlaying })
        }
    },

    onUnload() {
        recommendStore.offState("recommendInfo", this.handleRecommendSongs)
        
        rankingStore.offState("newRanking", this.getRankingHeadle("newRanking"))
        rankingStore.offState("originRanking", this.getRankingHeadle("originRanking"))
        rankingStore.offState("upRanking", this.getRankingHeadle("upRanking"))
        rankingStore.offState("hotRanking", this.getRankingHeadle("hotRanking"))
        
        playerStore.offStates(["currentSong","isPlaying"],this.handlePlayInfos)
    }
})